<template>
    <div class="app-container">
        <el-form :inline="true" :model="searchObj" class="demo-form-inline">

            <el-form-item>
                <el-select v-model="searchObj.provinceCode" placeholder="请选择" @change="findCity">
                    <el-option
                    v-for="item in provinceList"
                    :key="item.value"
                    :label="item.name"
                    :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>

            <el-form-item>
                <el-select v-model="searchObj.cityCode" placeholder="请选择市">
                    <el-option
                    v-for="item in cityList"
                    :key="item.value"
                    :label="item.name"
                    :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="医院名称">
                <el-input v-model="searchObj.hosname" placeholder="医院名称"></el-input>
            </el-form-item>
        
            <el-form-item>
                <el-button type="primary" @click="onSubmit">查询</el-button>
            </el-form-item>

            <el-form-item>
                <el-button type="danger" @click="rest">清空</el-button>
            </el-form-item>
        </el-form>
        <el-table
            ref="multipleTable"
            :data="list"
            tooltip-effect="dark"
            style="width: 100%"
            v-loading="loading"
            element-loading-text="拼命加载中"
            border>

            <el-table-column
            width="50"
            label="序号">
                <template slot-scope="scope">
                    {{ (pageNum-1)*pageSize +scope.$index+1 }}
                </template>
            </el-table-column>

            <el-table-column
                prop="logoData"
                label="医院logo"
                show-overflow-tooltip>
                <template slot-scope="scope">
                    <img key="" :src="'data:image/jpeg;base64,'+scope.row.logoData" width="80">
                </template>
            
            </el-table-column>

            <el-table-column
                prop="hosname"
                label="医院名称"
                show-overflow-tooltip>
            </el-table-column>

            <el-table-column
                prop="param.hostype"
                label="等级"
                show-overflow-tooltip>
            </el-table-column>

            <el-table-column
                prop="param.fullAddress"
                label="详情地址"
                show-overflow-tooltip>
            </el-table-column>

            <el-table-column label="状态">
                <template slot-scope="scope">
                    <el-button v-if="scope.row.status==0" type="danger" size="mini">未上线</el-button>
                    <el-button v-if="scope.row.status==1" type="primary" size="mini">已上线</el-button>
                </template>
            </el-table-column>

            <el-table-column
                prop="createTime"
                label="创建时间"
                show-overflow-tooltip>
            </el-table-column>

            <el-table-column label="操作" width="230" align="center">
                <template slot-scope="scope">
                    <router-link :to="'/yygh/hospital/show/'+scope.row.id">
                        <el-button type="primary" size="mini">查看</el-button>
                    </router-link>
                    &nbsp;
                    <router-link :to="'/yygh/hospital/schedule/'+scope.row.hoscode">
                        <el-button type="primary" size="mini">排班</el-button>
                    </router-link>
                    &nbsp;
                    <el-button v-if="scope.row.status == 1" type="danger" size="mini" 
                    @click="updateStatus(scope.row.id,0)">下线</el-button>
                    <el-button v-if="scope.row.status == 0" type="danger" size="mini" 
                    @click="updateStatus(scope.row.id,1)">上线</el-button>
                </template>
            </el-table-column>

            
        </el-table>
    
        <el-pagination
            @current-change="findPage"
            :current-page="pageNum"
            :page-size="pageSize"
            style="text-align: center;margin-top: 30px;"
            layout="total, prev, pager, next, jumper"
            :total="total">
        </el-pagination>
    </div>
</template>
<script>
    import hospital from '@/api/hospital'
    import dict from '@/api/dict'
import { status } from 'nprogress';
    export default{
        data(){
            return{
                pageNum:1,
                pageSize:3,
                total:0,
                searchObj:{},
                list:[],
                provinceList:[],
                cityList:[],
                loading:true
            }
        },
        methods:{
            updateStatus(id,status){
                this.$confirm('此操作将改变医院状态, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    hospital.updateStatus(id,status).then(resp=>{
                        this.$message({
                            type: 'success',
                            message: '修改状态成功!'
                        });
                        this.findPage();
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消状态修改!'
                    });          
                });
            },
            rest(){
                this.searchObj = {};
                this.findPage
            },
            onSubmit(){
                this.findPage();
            },
            findCity(){
                dict.findCity(this.searchObj.provinceCode).then(resp=>{
                    this.cityList = resp.data.items;
                })
            },
            findProvince(){
                dict.findProvince('Province').then(resp=>{
                    this.provinceList = resp.data.items;
                })
            },
            findPage(page = 1){
                this.pageNum = page;
                hospital.findPage(this.pageNum,this.pageSize,this.searchObj).then(resp=>{
                    this.total = resp.data.total;
                    this.list = resp.data.items;
                    this.loading = false;
                })
            }
        },
        created(){
            this.findPage();
            this.findProvince();
        }
    }
</script>